$(document).ready(function() {
	var box = $('#box');
	box.bind({
		mouseover : function() {
			var tg = $(this);
			tg.removeClass().addClass('over');
			tg.find('> p').text('mouseover');
		},
		mouseout : function() {
			var tg = $(this);
			tg.removeClass().addClass('out');
			tg.find('> p').text('mouseout');
		},
		click : function() {
			var tg = $(this);
			tg.removeClass().addClass('click');
			tg.find('> p').text('click');
		}
	});

	var nav = $('#nav');
	nav.find('> .mouseover').bind('click', function() {
		box.trigger('mouseover', $(this));
	});

	nav.find('> .mouseout').bind('click', function() {
		box.trigger('mouseout', $(this));
	});

	nav.find('> .click').bind('click', function() {
		box.click();
	});

});